<template>
    <div class="detail-container">
        <el-card shadow="never" style="margin-top: 15px;" class="detail-form">
            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger">当前合同流转状态：{{form.tOrderStateText}}</span>
            </div>
            <el-form size="mini" label-width="150px" style="margin-top:20px" ref="form" :rules="rules" :model="form">
                    <div style="margin-top:20px">
                        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                        <span class="font-small">基本信息</span>
                    </div>

                    <el-form-item label="采购合同：" style="margin-bottom:20px;">
                        {{form.purchaseOrderSn}}
                    </el-form-item>

                    <el-form-item label="供应商：" style="margin-bottom:20px;">
                        {{form.supplierName}}
                    </el-form-item>

                    <el-form-item label="合同公司：" style="margin-bottom:20px;">
                         {{form.fromCompany}}
                    </el-form-item>

                    <el-form-item label="提货日期：" style="margin-bottom:20px;">
                        {{form.tOrderTime}}
                    </el-form-item>

                    <el-form-item label="提货备注：" style="margin-bottom:20px;">
                       {{form.tRemark}}
                      <el-button size="small" type="text" @click="showDetail2">修改</el-button>
                    </el-form-item>
                    <div style="margin-top: 20px;clear: both">
                        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                        <span class="font-small">商品信息</span>
                    </div>
                    <el-table
                            ref="orderItemTable"
                            :data="form.tOrdGoodsList"
                            style="margin-top: 20px;box-sizing: border-box;width:1071px" border>
                        <el-table-column label="商品名称" width="200">
                            <template slot-scope="scope">
                                <el-form-item label-width="0">
                                    {{scope.row.goodsSn}}
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column label="包装" width="180"  align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0">
                                    {{scope.row.goodsWeight}} <span>kg/包</span>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="采购数量（吨）" width="130" align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0">
                                    {{scope.row.purchaseNum}}
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="提货数量（吨）" width="130" align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" :prop="`tOrdGoodsList.${scope.$index}.takeNum`" :rules="rules.takeNum">
                                    <el-input style="width:100px" v-model="scope.row.takeNum" v-if="(form.tOrderState == 0 || form.tOrderState == 40 || form.tOrderState == 50) && form.isCanCheck"></el-input>
                                    <span v-else>{{scope.row.takeNum}}</span>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column label="是否含托" width="130" align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0">
                                    <el-checkbox v-model="scope.row.isHasTray" v-if="(form.tOrderState == 0 || form.tOrderState == 40 || form.tOrderState == 50) && form.isCanCheck">是</el-checkbox>
                                    <span v-else>{{scope.row.isHasTray ? '是' : '否'}}</span>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column label="备注" width="300" align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0">
                                   {{scope.row.tgRemark}}
                                </el-form-item>

                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="overflow: hidden" v-if="form.saleOrderId">
                        <div style="margin-top: 40px;clear: both">
                            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                            <span class="font-small">销售合同</span>
                        </div>
                            <el-form-item label="合同号：" style="margin-bottom:20px;">
                               {{form.saleOrderSn}}
                                <el-button type="text" style="margin-left:10px"  @click="toDetail">查看合同详情</el-button>
                            </el-form-item>
                         <div>
                             <el-form-item label="客户编号：" style="margin-bottom:20px;">{{form.customerNumber}}</el-form-item>
                             <el-form-item label="客户名称：" style="margin-bottom:20px;" v-if="form.isShowCustomerName">{{form.customerName}}</el-form-item>
                             <el-form-item label="合同时间：" style="margin-bottom:20px;">{{form.orderTime}}</el-form-item>
                             <el-form-item label="付款状态：" style="margin-bottom:20px;">{{form.payState | fiferPayState}}</el-form-item>
                             <el-form-item label="财务审核状态：" style="margin-bottom:20px;">{{form.financeState }}</el-form-item>
                             <el-form-item label="收货信息：" style="margin-bottom:20px;">
                                 {{form.receiveAddress}}
                             </el-form-item>
                             <el-form-item label="商品信息：" style="margin-bottom:20px;">
                                 <el-table
                                         :data="form.saleOrdGoodsList"
                                         style="box-sizing: border-box;width:691px" border>
                                     <el-table-column label="商品名称" width="200">
                                         <template slot-scope="scope">
                                             {{scope.row.goodsName}}/{{scope.row.goodsSn}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="合同数量" width="100"  align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.buyNum}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="已发货数量" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.sendNum}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="期望发货时间" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.expectSendDate}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="预计发货时间" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.sendDate1}}
                                         </template>
                                     </el-table-column>
                                 </el-table>
                             </el-form-item>
                             <el-form-item label="排货信息：" style="margin-bottom:20px;">
                                 <el-table
                                         :data="form.planList"
                                         style="box-sizing: border-box;width:871px" border>
                                     <el-table-column label="商品名称" width="200">
                                         <template slot-scope="scope">
                                             {{scope.row.goodsName}}/{{scope.row.goodsSn}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="提货数量" width="100"  align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.planNum}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="提货仓库" width="180" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.planWarehouse}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="提货时间" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.takeTime}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="联系人" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.contactName}}
                                         </template>
                                     </el-table-column>
                                     <el-table-column label="联系电话" width="130" align="center">
                                         <template slot-scope="scope">
                                             {{scope.row.contactMobile}}
                                         </template>
                                     </el-table-column>
                                 </el-table>
                             </el-form-item>
                         </div>
                    </div>

                    <div>
                        <div style="margin-top: 40px;clear: both">
                            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                            <span class="font-small">司机信息</span>
                        </div>
                        <div style="margin-top:20px;" v-if="form.tOrderState == 30 && form.isCanCheck">
                            <el-form-item label="司机：" style="margin-bottom:20px;" prop="driverName" >
                                <el-input style="width:195px" v-model="form.driverName" ></el-input>
                            </el-form-item>
                            <el-form-item label="手机号：" style="margin-bottom:20px;" prop="driverMobile" v-if="form.tOrderState == 30 && form.isCanCheck">
                                <el-input style="width:195px" v-model="form.driverMobile" ></el-input>
                            </el-form-item>

                            <el-form-item label="车牌号：" style="margin-bottom:20px;" prop="driverCardNo" v-if="form.tOrderState == 30 && form.isCanCheck">
                                <el-input style="width:195px" v-model="form.driverCardNo"></el-input>
                            </el-form-item>
                        </div>
                        <div v-else>
                            <el-form-item label="司机："  >
                                <span>{{form.driverName}}</span>
                            </el-form-item>
                            <el-form-item label="手机号：" >
                                <span>{{form.driverMobile}}</span>
                                <span style="padding-left:20px;"><el-checkbox v-model="checked">显示手机号</el-checkbox></span>
                            </el-form-item>

                            <el-form-item label="车牌号：">
                                <span>{{form.driverCardNo}}</span>
                            </el-form-item>
                        </div>
                        <el-form-item label-width="50px" label="备注">
                            <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" style="width:400px"  v-model.trim="remark"></el-input>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item label="提货流向：" label-width="80px" style="margin-top:10px;">
                            {{form.flowTo == 1 ? '客户' : '仓库'}}
                            <span v-if="form.flowTo == 2"> {{form.toWarehouse}}</span>
                        </el-form-item>
                    </div>
            </el-form>
        </el-card>

        <div style="margin-top:40px;text-align: center">
            <el-button  style="width:150px;" @click="submit('pass')" type="primary" :loading="btnLoading1" v-if="form.isCanCheck==1">确 认</el-button>
            <el-button  style="width:150px;"  type="primary" @click="showPrint" v-if="this.form.tOrderState == 50 || this.form.tOrderState == 60">打 印</el-button>
            <el-button  style="width:150px;" @click="submit('back')" :loading="btnLoading2" v-if="form.isCanBack==1">回 退</el-button>
            <el-button  style="width:150px;"  @click="submit('cancel')" :loading="btnLoading3" v-if="form.isCanCancel==1 && this.form.tOrderState != 10">取 消</el-button>
        </div>

        <div style="margin-top: 20px;clear: both">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">操作记录</span>
        </div>
        <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
            <el-timeline>
                <el-timeline-item
                        v-for="(activity, index) in form.logList"
                        :key="index">
                    <span><span style="padding-right:10px;">{{activity.createTime}}</span>{{activity.userName}}：{{activity.content}} <span v-show="activity.remark && activity.remark != ''" style="color:red;padding-left:5px">备注：{{activity.remark}}</span></span>
                </el-timeline-item>
            </el-timeline>
            <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="form.logList && form.logList.length == 0">- 暂无数据 -</div>
        </div>


        <!--打印弹窗-->
        <el-dialog
                :close-on-click-modal="false"
                :beforeClose="closePrint"
                :visible.sync="dialogVisible"
                width="900px">
            <div style="height:100%;background: #fff" id="print-div">
                <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">提货单</div>
                <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin-top:20px" >
                    <div>{{formPrint.supplierName}}：</div>
                    <div style="padding-left:28px;margin-top:10px">我司将于 {{formPrint.tOrderTime | formatTime }} 派车辆前往贵司指定仓库提货，请予协助办理。具体信息如下：</div>
                    <div style="overflow: hidden">
                        <div style="padding-left:28px;margin-top:20px;">
                            <span style="display: inline-block;width:80px;">内部合同:</span>
                            <span style="display: inline-block;text-decoration: underline">{{formPrint.purchaseOrderSn}}</span>
                        </div>
                        <div style="padding-left:28px;">
                            <span style="display: inline-block;width:80px;">司机姓名:</span>
                            <span style="display: inline-block;text-decoration: underline">{{formPrint.driverName}}</span>
                        </div>
                        <div style="padding-left:28px;" v-if="checked">
                            <span style="display: inline-block;width:80px;">司机手机:</span>
                            <span style="display: inline-block;text-decoration: underline">{{formPrint.driverMobile}}</span>
                        </div>
                        <div style="padding-left:28px;">
                            <span style="display: inline-block;width:80px;">提货车牌:</span>
                            <span style="display: inline-block;text-decoration: underline">{{formPrint.driverCardNo}}</span>
                        </div>
                        <div class="good-table" style="margin-top:20px;">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:1px solid #000;border-bottom:1px solid #000">
                                <tr>
                                    <th align="center" style="border-top:1px solid #000;background: #f2f2f2">商品名称</th>
                                    <th align="center" style="border-top:1px solid #000;background: #f2f2f2">包装</th>
                                    <th align="center" style="border-top:1px solid #000;background: #f2f2f2">提货数量（吨）</th>
                                    <th align="center" style="border-top:1px solid #000;white-space:nowrap;background: #f2f2f2">是否含托盘</th>
                                    <th align="center" style="border-right: 1px solid #000;border-top:1px solid #000;background: #f2f2f2">备注</th>
                                </tr>
                                <tr v-for="item in formPrint.tOrdGoodsList">
                                    <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>
                                    <td align="center" style="white-space:nowrap;"><div class="td-con" >{{item.goodsWeight}} kg/包</div></td>
                                    <td align="center" style="white-space:nowrap;"><div class="td-con">{{item.takeNum}}</div></td>
                                    <td align="center"><div  class="td-con">{{item.isHasTray ? '是' : '否'}}</div></td>
                                    <td align="center"  style="border-right: 1px solid #000"><div class="td-con" style="max-width:150px">{{item.tgRemark}}</div></td>
                                </tr>
                            </table>
                        </div>
                        <div style="margin-top:20px;">备注：<div>{{formPrint.tRemark}}</div><div v-for="item in formPrint.changeCarNoList">{{item.msg}}</div></div>
                        <div style="margin-top:40px;text-align: right">{{formPrint.fromCompany}}</div>
                        <div style="text-align: right">{{newTime}}</div>
                        <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
            </div>
        </el-dialog>


      <!--编辑提货备注-->
      <el-dialog
        title="费用信息"
        :visible.sync="dialogVisible2"
        width="500px">
        <el-form :model="sendForm" size="mini" label-width="100px" >
          <el-form-item label="提货备注：">
            <el-input :autosize="{ minRows: 2, maxRows: 6}" type="textarea" v-model="sendForm.tRemark"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose2">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm2" :loading="btnLoading5">确 定</el-button>
            </span>
      </el-dialog>


    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import {getTakeInfo,addOrderTakeOrder,postTakeOrderOrderProcess,getPrintContentakeOrder,changeTakeInfo} from '@/api/partner'
    import "@/utils/jQuery.print"
    import {validateCommission} from '@/utils/validate';
    const defaultForm={
        "purchaseOrderId": null,
        "purchaseOrderSn": "",
        "supplierName": "",
        "fromCompany": "",
        "ordGoodsList": [],
        tRemark:'',
        saleOrderId:null,
    };
    const defaultItme = {
        "goodsKingId": '',
        "goodsName": "",
        "goodsSn": "",
        "purchaseNum": "",
        goodsWeight:'',
        takeNum:'',
        isHasTray:false,
        tgRemark:'',
        options:[],
        loading:false,
    };
    const defaultForm2={
        "saleOrderId": null,
        "saleOrderSn": "",
        "customerName": "",
        "createTime": "",
        "payState": '',
        "financeState": "",
        "receiverName": "",
        "receiverMobile": "",
        "addressInfo": "",
        "ordGoodsList": []
    };
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                loading:false,
                tOrderId:this.$route.query.tOrderId,
                orderInfo:{},
                dialogVisible:false,
                btnLoading1:false,
                btnLoading2:false,
                btnLoading3:false,
                form:JSON.parse(JSON.stringify(defaultForm)),
                rules:{
                    driverName:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                    driverMobile:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                    driverCardNo:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                    takeNum:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                },
                remark:'',
                formPrint:{},
                checked:false,
                dialogVisible2:false,
                btnLoading5:false,
                sendForm:{
                  tRemark:'',
                  tOrderId:this.$route.query.tOrderId,
                }
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
            newTime() {
                let date = new Date();
                return formatDate(date, 'yyyy年MM月dd日')
            },
        },
        created() {
            this.getOrderInfo();
        },
        filters: {
            fiferPayState(val){
                if(val == 0){
                    return '--'
                }else if(val == 1){
                    return '未结清'
                }else if(val == 2){
                    return '已结清'
                }
            },
            formatTime(time) {
                if(time){
                    let date = new Date(time);
                    return formatDate(date, 'yyyy年MM月dd日')
                }

            },
        },
        methods:{

          showDetail2(){
            this.dialogVisible2 = true;
            this.sendForm.tRemark = this.form.tRemark;
          },
          handleClose2(){
            this.dialogVisible2 = false;
          },
          handleConfirm2(){
            this.btnLoading5 = true;
            changeTakeInfo(this.sendForm).then(()=>{
              this.btnLoading5 = false;
              this.handleClose2();
              this.getOrderInfo();
            }).catch(()=>{
              this.btnLoading5 = false;
            })
          },
            //显示打印弹窗
            showPrint(){
                this.dialogVisible = true;
                getPrintContentakeOrder({tOrderId:this.tOrderId}).then((res)=>{
                        this.formPrint = res;
                })

            },
            //关闭打印弹窗
            closePrint(){
                this.dialogVisible = false;
            },

            //打印
            printdiv(){
                $("#print-div").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },

            //去订单详情页
            toDetail(){
                let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:this.form2.saleOrderId,type:'see'}});
                window.open(routeData.href);
            },

            //获取提货详情
            getOrderInfo(){
                getTakeInfo({tOrderId:this.$route.query.tOrderId}).then((res)=>{
                        this.form = res;
                        this.form.tOrdGoodsList.forEach((el)=>{
                            el.isHasTray = el.isHasTray == 1 ? true : false
                        })
                }).catch((err)=>{
                })
            },

            //提交
            submit(type){
                this.$refs.form.validate((valid) => {
                    console.log("valid",valid)
                    if (valid) {
                        let data = {};
                        data.remark = this.remark;
                        data.tOrderId = this.tOrderId;
                        if(type=='back'){

                            data.action = 'back';
                            if(this.remark == ''){
                                this.$message({
                                    message: '回退时备注必填',
                                    type: 'error'
                                });
                                return false;
                            }
                            this.btnLoading2 = true;
                        }else if(type=='cancel'){

                            data.action = 'cancel';
                            if(this.remark == ''){
                                this.$message({
                                    message: '取消时备注必填',
                                    type: 'error'
                                });
                                return false;
                            }
                            this.btnLoading3 = true;
                        }else{
                            this.btnLoading1 = true;
                            if(this.form.tOrderState == 0){
                                data.action = 'purchaseEnter';
                            }else if(this.form.tOrderState == 20){
                                data.action = 'financeEnter';
                            }else if(this.form.tOrderState == 30){
                                data.action = 'logisticsEnter';
                            }else if(this.form.tOrderState == 40){
                                data.action = 'purchaseReEnter';
                            }else if(this.form.tOrderState == 50){
                                data.action = 'takeEnter';
                            }
                        }

                        if((this.form.tOrderState == 0 || this.form.tOrderState == 40 || this.form.tOrderState == 50) && type == 'pass'){
                            data.tOrdGoodsList = [];
                            this.form.tOrdGoodsList.forEach((el)=>{
                                data.tOrdGoodsList.push({
                                    tgId:el.tgId,
                                    takeNum:el.takeNum,
                                    isHasTray:el.isHasTray ? 1 : 0,
                                })
                            });
                        }
                        if(this.form.tOrderState == 30){
                            data.driverName = this.form.driverName;
                            data.driverCardNo = this.form.driverCardNo;
                            data.driverMobile = this.form.driverMobile;
                        }
                        postTakeOrderOrderProcess(data).then(response => {
                            this.btnLoading1 = false;
                            this.btnLoading2 = false;
                            this.btnLoading3 = false;
                            this.$message({
                                message: '提交成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.push({name:'pickUpList'});
                        }).catch(() => {
                            this.btnLoading1 = false;
                            this.btnLoading2 = false;
                            this.btnLoading3 = false;
                        })
                    }
                })
            },
        }
    }
</script>

<style  lang="scss" scoped>
    .avatar-uploader{
        margin-bottom:10px;
        display: inline-block;
        width:80px;
        height:80px;
        border:1px solid #DCDFE6;
        text-align: center;
        line-height: 80px;
    }
    .detail-form{
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
            margin-bottom:0px;
        }
    }

    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    #print-div{
        font-size:14px;
        font-family: "Microsoft YaHei";
        color:#000;
        .title{
            font-size:28px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
        }
        .paper-top{
            margin-top:20px;
            line-height: 20px;
        }
        .good-table{
            margin-top:0px;
            table{
                border-left:1px solid #000;
                border-bottom:1px solid #000;
                td,th{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
            }
        }
        .paper-bottom{
            margin-top:0px;
            line-height: 20px;
        }
    }
</style>
